<template>
  <div class="home">
    <van-skeleton  :row="25" animate :loading="isLoading" :row-width="list" >
      <SearchInput></SearchInput>
      <Slideshow></Slideshow>
      <Nav></Nav>
      <Coupon></Coupon>
      <GroupBuy></GroupBuy>
      <BrandSupply></BrandSupply>
      <NewProduct></NewProduct>
      <Popular></Popular>
      <ThematicSelection></ThematicSelection>
    </van-skeleton>
  </div>
</template>

<script>
// @ is an alias to /src

import SearchInput from '@/components/searchInput'
import Slideshow from '../components/slideshow'
import Nav from '../components/nav'
import Coupon from '../components/coupon'
import GroupBuy from '../components/groupBuy'
import BrandSupply from '../components/brandSupply'
import NewProduct from '../components/newProduct'
import ThematicSelection from '../components/thematicSelection'
import Popular from '../components/popular'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'handPick',
  components: {
    SearchInput,
    Slideshow,
    Nav,
    Coupon,
    GroupBuy,
    BrandSupply,
    NewProduct,
    Popular,
    ThematicSelection
  },
  data () {
    return {
      list: [0, 0, 0, 0, 0, 0, 0, 0]
    }
  },
  computed: {
    ...mapState('HandPick', ['isLoading'])
  },
  created () {
    // 调用dispatch
    this.getHandPickData()
  },
  mounted () {
  },
  methods: {
    // 获取Actions中的函数，
    ...mapActions('HandPick', { getHandPickData: 'getHandPickData' })
  }
}
</script>
<style scoped lang="scss">
.home{
  margin-bottom: 50px;
  background-color: rgb(242, 242, 242);
}
::v-deep .van-skeleton__content{
  background-color: #ccc;
}
</style>
